import logo from './logo.svg';
import './App.css';
import Footer from './components/Footer';
import Header from './components/Header';
import List from './components/List';

import { useState } from 'react';

function App() {
  // 使用 useState 定义状态
  const [todos, setTodos] = useState([
    { id: '001', name: '吃饭', done: true },
    { id: '002', name: '睡觉', done: true },
    { id: '003', name: '打代码', done: false },
    { id: '004', name: '逛街', done: false }
  ]);

  // 用于添加一个 todo，接收的参数是一个 todo 对象
  const addTodo = (todoObj) => {
    // 追加一个 todo
    const newTodos = [todoObj, ...todos];
    // 更新状态
    setTodos(newTodos);
  }

  // 用于更新一个 todo 对象
  const updateTodo = (id, done) => {
    // 根据 id 和 done 更新指定的 todo 对象
    const newTodos = todos.map(todoObj => {
      if (todoObj.id === id) {
        return { ...todoObj, done };
      } else {
        return todoObj;
      }
    });
    // 更新状态
    setTodos(newTodos);
  }

  // 用于删除一个 todo 对象
  const deleteTodo = (id) => {
    // 根据 id 删除指定的 todo 对象
    const newTodos = todos.filter(todoObj => {
      return todoObj.id !== id;
    });
    // 更新状态
    setTodos(newTodos);
  }

  //用于全选
  const checkAllTodo = (done) => {
    // 更新状态
    const newTodos = todos.map(todoObj => {
      return { ...todoObj, done };
    });
    setTodos(newTodos);
  }

  // 用于清除所有已完成的
  const clearAllDone = () => {
    // 更新状态
    const newTodos = todos.filter(todoObj => {
      return !todoObj.done;
    });
    setTodos(newTodos);
  }

  return (
    <div className="App">
      <Header addTodo={addTodo} />
      <List todos={todos} updateTodo={updateTodo} deleteTodo={deleteTodo} />
      <Footer todos={todos} checkAllTodo={checkAllTodo} clearAllDone={clearAllDone} />
    </div>
  );
}

export default App;
